<template>
  <div class="submit-content-left">
    <!-- 头像昵称 -->
    <div class="heads-nicknames-box">
      <img
        class="heads"
        :src="qq_heads"
        v-real-img="'https://www.keaidian.com/uploads/allimg/190424/24110307_23.jpg'"
      />
      <span class="nicknames">{{ userInfo.name }}</span>
     <router-link v-if="!userInfo.name" :to="{ path: '/login' }"><span>登录/注册</span></router-link>
    </div>
    <!-- 个性签名 -->
    <div class="signature">
      <p>
        Kind hearts are the gardens,kind thoughts are the roots, kind words are flowers and kind
        deeds are the fruits.
      </p>
    </div>
    <!-- 今日任务详情 -->
    <div class="today-task">
      <div class="task-title">
        <vue-icon class="icon" iconClass="zuoye2" size="30" color="#1296db"></vue-icon>
        <span class="text">
          今日任务详情
          <div class="l-text">Details of today's task</div>
        </span>
      </div>
      <div class="task-container">
        <br />
        <h3 class="textTitle">{{ curWork.name }}</h3>
        <br />
        <p class="textMessage"><span class="bold">内容:</span>{{ curWork.message }}</p>
        <br />
        <p class="textDdl"><span class="bold">截止日期:</span>{{curWork.stop}}</p>
      </div>
    </div>
    <!--最下面的功能板 -->
    <div class="function-board">
      <vue-icon iconClass="shezhi" color="#353535" size="25"></vue-icon>
      <vue-icon iconClass="jurassic_user" size="25"></vue-icon>
     <router-link :to="{ path: '/login' }"> <vue-icon iconClass="24gl-extractRight" size="25" color="#585b5e"></vue-icon></router-link >
    </div>
  </div>
</template>
<script>
import {greenwichTransform} from '../../utils/date'
export default {
  data: () => {
    return {
      taskContainer: {},
      task: '',
      worklist: [],
      textDeadline: '',
    };
  },
  props:{
    userInfo:{
        type:Object,
        default:{
         name: null,
         direction: '',
         qq_id: '',
        },
        require:true
    },
    curWork:{
        type:Object,
        default:{
        name:'-',
        message:'',
        stop:''
        },
        require:true
    }
  },
  computed: {
    qq_heads() {
      // this.qq_id = 792439507;
      return `https://q1.qlogo.cn/g?b=qq&nk=${this.userInfo.qq_id}&s=4`;
    },
  },
  methods: {
  },
};
</script>

<style lang="less" scoped>
.login-span{
 color:#4990e2;
}
.submit-content-left {
  width: 19vw;
  height: 85vh;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 1.7vw;
  .heads-nicknames-box {
    height: 44px;
    width: 100%;
    // border: solid black;
    margin-top: 5vh;
    overflow: hidden;
    .heads {
      display: inline-block;
      margin-left: 4vw;
      border-radius: 50%;
      width: 44px;
      height: 44px; //56px
      background-size: auto 40px;
      background-color: white;
      vertical-align: middle;
    }
    .nicknames {
      font-size: 1vw;
      font-weight: 600;
      display: inline-block;
      margin-left: 2vw;
      text-align: center;
    }
  }
  .signature {
    margin-top: 4vh;
    padding: 0px 1.9vw; //30px
    width: 19vw;
    height: 15vh;
    border-bottom: #e3eaf2 solid 2px;
    p {
      font-size: 1vh;
      line-height: 2.5vh;
      letter-spacing: 1px;
      color: #000;
    }
  }
  .today-task {
    position: relative;
    width: 100%;
    height: 44.5vh;
    // border: black solid;
    padding: 0 1.9vw;
    ::-webkit-scrollbar {
      width: 0.3vw;
    }
    ::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.4);
    }
    ::-webkit-scrollbar-thumb {
      min-height: 20px;
      background-clip: content-box;
      box-shadow: 0 0 0 5px rgba(91, 142, 225, 0.2) inset;
    }
    .task-title {
      // height: 6.8vh;
      // width: 100%;
      // border:solid black;
      margin-top: 1.2vh;
      text-align: center;
      .icon {
        float: left;
        display: inline-block;
        width: 1vw;
        height: 100%;
        // border: solid black;
      }
      .text {
        text-align: center;
        float: left;
        display: inline-block;
        width: 12vw;
        height: 6.6vh;
        font-size: 1.4vw;
        font-weight: 500;
        letter-spacing: 0.2vw;
        // border: solid black;
        // background-color: blue;
        // overflow: hidden;
        .l-text {
          font-size: 0.5vw;
          font-weight: 500;
          letter-spacing: 0.06vw;
        }
      }
    }
    .task-container {
      padding-top: 1vh;
      height: 39vh;
      width: 100%;
      line-height: 3vh;
      font-size: 1vw;
      overflow-y: auto;
      // border: solid black;
      word-break: break-word; /* 文本行的任意字内断开，就算是一个单词也会分开 */
      .bold {
        font-weight: 600;
      }
    }
  }
  .function-board {
    margin-top: 2.4vh;
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
    height: 6vh;
    width: 100%;
    // border: solid black;
    .set-up,
    .personal,
    .other {
      display: inline-block;
      width: 1.6vw;
      height: 1.6vw;
      outline: 0;
      border: 0;
      background-color: rgba(255, 255, 255, 0);
    }
  }
}
</style>
